/** 2. 搜索条件分类 */
<template>
  <div class="classify_container">
    <a-button class="drawer-button" type="primary" @click="showDrawer"
      >分类结果</a-button
    >
    <a-row :gutter="16">
      <a-col :span="12">
        <a-tabs v-model:activeKey="baseActiveKey" type="card">
          <a-tab-pane
            v-for="condition_item in baseSiteList"
            :key="condition_item.id"
          >
            <template #tab>
              <span>
                <a-tag color="#f50">基准站点</a-tag>
                <span>{{ condition_item.site_name }}</span>
                -
                <span>{{ condition_item.category_name }}</span>
              </span>
            </template>
            <div class="list_window">
              <a-list
                size="small"
                :bordered="true"
                :data-source="
                  condition_map[
                    `${condition_item.site_code}:${condition_item.category_code}`
                  ]
                "
              >
                <template #renderItem="{ item }">
                  <a-list-item
                    :class="[
                      item.pick_me ? 'deled_row' : '',
                      item.pick_diff ? 'deled_row_diff' : '',
                      item.pick_tear ? 'deled_row_tear' : '',
                    ]"
                  >
                    <a-col
                      :span="4"
                      style="
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      "
                    >
                      <h4
                        style="
                          text-align: left;
                          min-width: 128px;
                          margin-bottom: 4px;
                        "
                      >
                        {{ item.condition_name }}
                      </h4>
                      <!-- <span
                        style="color: #aaa"
                        v-text="item.condition_code"
                      ></span> -->
                    </a-col>
                    <a-popover placement="top">
                      <template #title>{{ `"${item.condition_name}" 选项值:` }}</template>
                      <template #content>
                        <p style="max-width: 800px">
                          {{ item.options.map(i => i.option_name).join(' | ') }}
                        </p>
                      </template>
                      <p class="condition_options_container">
                        <p>
                          {{ item.options.map(i => i.option_name).join(',') }}
                        </p>
                      </p>
                    </a-popover>
                    <template #actions>
                      <a-space
                        size="small"
                        style="display: flex; flex-direction: row; margin: -4px -10px -4px -20px; padding: 0;"
                      >
                        <a-popconfirm
                          title="选择关联相同组搜索条件"
                          ok-text="确定"
                          cancel-text="取消"
                          @confirm="add_same_condition(item)"
                          :disabled="item.pick_me"
                        >
                          <template #description>
                            <p style="margin: 10px 4px">
                              请选择匹配 "{{ item.condition_name }}" 的搜索条件
                            </p>
                            <a-select
                              v-model:value="select_same_conditions"
                              mode="multiple"
                              style="width: 320px; margin-bottom: 12px"
                              :dropdownStyle="{ zIndex: 9999 }"
                              :options="same_select_conditions"
                            >
                            </a-select>
                          </template>
                          <a-button
                            style="text-align: center; margin: 0 -6px;"
                            size="small"
                            :type="item.pick_me && !item.pick_diff && !item.pick_tear ? 'dashed' : 'link'"
                            :disabled="item.pick_me"
                            @click="gen_same_select_conditions(item)"
                            >加入相同组</a-button
                          >
                        </a-popconfirm>
                        <a-button
                          style="text-align: center; margin: 0 -6px;"
                          size="small"
                          :type="item.pick_me && item.pick_diff ? 'dashed' : 'link'"
                          :disabled="item.pick_me"
                          key="to_diff"
                          @click="add_diff_condition(item)"
                          >加入不同组</a-button
                        >
                        <a-button
                          style="text-align: center; margin: 0 -6px;"
                          size="small"
                          :type="item.pick_me && item.pick_tear ? 'dashed' : 'link'"
                          :disabled="item.pick_me"
                          key="to_teardown"
                          @click="add_tear_condition(item)"
                          >加入拆解组</a-button
                        >
                        <a-button
                          style="text-align: center; margin: 0 -6px;"
                          size="small"
                          type="link"
                          :disabled="!item.pick_me"
                          key="remove_all"
                          danger
                          @click="remove_from_table(item)"
                          >移出所有</a-button
                        >
                      </a-space>
                    </template>
                  </a-list-item>
                </template>
              </a-list>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="12">
        <a-tabs v-model:activeKey="compareActiveKey" type="card">
          <a-tab-pane
            v-for="condition_item in compareSiteList"
            :key="condition_item.key"
          >
            <template #tab>
              <span>
                <span>{{ condition_item.site_name }}</span>
                -
                <span>{{ condition_item.category_name }}</span>
              </span>
            </template>
            <div class="list_window">
              <a-list
                size="small"
                :bordered="true"
                :data-source="
                  condition_map[
                    `${condition_item.site_code}:${condition_item.category_code}`
                  ]
                "
              >
                <template #renderItem="{ item }">
                  <a-list-item
                    :class="[
                      item.pick_me ? 'deled_row' : '',
                      item.pick_diff ? 'deled_row_diff' : '',
                      item.pick_tear ? 'deled_row_tear' : '',
                    ]"
                  >
                    <a-col
                      :span="4"
                      style="
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      "
                    >
                      <h4
                        style="
                          text-align: left;
                          min-width: 128px;
                          margin-bottom: 4px;
                        "
                      >
                        {{ item.condition_name }}
                      </h4>
                      <!-- <span
                        style="color: #aaa"
                        v-text="item.condition_code"
                      ></span> -->
                    </a-col>
                    <a-popover placement="top">
                      <template #title>{{ `"${item.condition_name}" 选项值:` }}</template>
                      <template #content>
                        <p style="max-width: 800px">
                          {{ item.options.map(i => i.option_name).join(' | ') }}
                        </p>
                      </template>
                      <p class="condition_options_container">
                        <p>
                          {{ item.options.map(i => i.option_name).join(',') }}
                        </p>
                      </p>
                    </a-popover>
                    <template #actions>
                      <a-space
                        size="small"
                        style="display: flex; flex-direction: row; margin: -4px -10px -4px -20px; padding: 0;"
                      >
                        <a-popconfirm
                          title="选择关联相同组搜索条件"
                          ok-text="确定"
                          cancel-text="取消"
                          @confirm="add_same_condition(item)"
                          :disabled="item.pick_me"
                        >
                          <template #description>
                            <p style="margin: 10px 4px">
                              请选择匹配 "{{ item.condition_name }}" 的搜索条件
                            </p>
                            <a-select
                              v-model:value="select_same_conditions"
                              mode="multiple"
                              style="width: 320px; margin-bottom: 12px"
                              :dropdownStyle="{ zIndex: 9999 }"
                              :options="same_select_conditions"
                            >
                            </a-select>
                          </template>
                          <a-button
                            style="text-align: center; margin: 0 -6px;"
                            size="small"
                            :type="item.pick_me && !item.pick_diff && !item.pick_tear ? 'dashed' : 'link'"
                            :disabled="item.pick_me"
                            @click="gen_same_select_conditions(item)"
                            >加入相同组</a-button
                          >
                        </a-popconfirm>
                        <a-button
                          style="text-align: center; margin: 0 -6px;"
                          size="small"
                          :type="item.pick_me && item.pick_diff ? 'dashed' : 'link'"
                          :disabled="item.pick_me"
                          key="to_diff"
                          @click="add_diff_condition(item)"
                          >加入不同组</a-button
                        >
                        <a-button
                          style="text-align: center; margin: 0 -6px;"
                          size="small"
                          :type="item.pick_me && item.pick_tear ? 'dashed' : 'link'"
                          :disabled="item.pick_me"
                          key="to_teardown"
                          @click="add_tear_condition(item)"
                          >加入拆解组</a-button
                        >
                        <a-button
                          style="text-align: center; margin: 0 -6px;"
                          size="small"
                          type="link"
                          :disabled="!item.pick_me"
                          key="remove_all"
                          danger
                          @click="remove_from_table(item)"
                          >移出所有</a-button
                        >
                      </a-space>
                    </template>
                  </a-list-item>
                </template>
              </a-list>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>

    <a-drawer
      :width="500"
      title="分类结果"
      placement="bottom"
      :open="open"
      @close="onClose"
    >
      <a-row :gutter="[10, 0]">
        <a-col :span="8">
          <h3 style="text-align: center">相同搜索条件组</h3>
          <a-table
            :dataSource="step_data.same_group"
            :columns="tb_columns.same_condition_columns"
            :pagination="{ pageSize: 10 }"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'operation'">
                <span>
                  <a
                    class="opt_text_2"
                    @click="remove_condition('same', record)"
                    >删除</a
                  >
                </span>
              </template>
              <template v-if="column.key === 'matches_txt'">
                <div>
                  <a-tag
                    v-for="match_site in record.matches"
                    :key="`${match_site.site_code}:${match_site.condition_name}`"
                    style="margin: 2px"
                    color="blue"
                  >
                    {{ match_site.site_code }}:{{ match_site.condition_name }}
                  </a-tag>
                </div>
                <!-- <span>
                  {{
                    record.matches
                      .map((i) => `${i.site_code}:${i.condition_name}`)
                      .join(";\n")
                  }}
                </span> -->
              </template>
            </template>
          </a-table>
        </a-col>
        <a-col :span="8">
          <h3 style="text-align: center">不同搜索条件组</h3>
          <a-table
            :dataSource="step_data.diff_group"
            :columns="tb_columns.diff_condition_columns"
            :pagination="{ pageSize: 10 }"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'operation'">
                <span>
                  <a
                    class="opt_text_2"
                    @click="remove_condition('diff', record)"
                    >删除</a
                  >
                </span>
              </template>
            </template>
          </a-table>
        </a-col>
        <a-col :span="8">
          <h3 style="text-align: center">拆解搜索条件组</h3>
          <a-table
            :dataSource="step_data.tear_group"
            :columns="tb_columns.tear_condition_columns"
            :pagination="{ pageSize: 10 }"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'operation'">
                <span>
                  <a
                    class="opt_text_2"
                    @click="remove_condition('tear', record)"
                    >删除</a
                  >
                </span>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-drawer>

    <a-space
      :style="{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: '10px' }"
    >
      <a-button @click="finish" type="primary">提交保存</a-button>
      <a-button @click="clear_all_condition">清空重选</a-button>
    </a-space>

    <ReadOnlyMask :enabled="step_data.read_only" />
  </div>
</template>

<script setup>
import { ref, onMounted,createVNode, computed } from 'vue';
import ReadOnlyMask from '@/components/commons/ReadOnlyMask.vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {
  fetch_process_data,
  update_process_data,
  update_step_data,
  get_process_step_data,
  clone_site_data,
  get_condition_map,
  get_raw_condition_map,
  get_baseline_site_code,
  drop_diff_condition,
  drop_tear_condition,
} from '@/utils/selection';

const emit = defineEmits(['finish']);

const baseline_site_code = ref('');

// 获取当前进度数据
const process_data = ref({});

// 步骤数据
const step_data = ref({
  read_only: false,
  same_group: [],
  diff_group: [],
  tear_group: [],
});

// 分类列表 (从api获取)
const site_list = ref([
  {
    baseline: true,
    site_logo_url:
      'https://www.automate.org/userAssets/members/3834/logo/mcma-MISUMI-Logo-FullColorBlack-RGB-250x125.png',
    site_name: '米思米',
    site_code: 'misumi',
    category_name: '线性导向轴',
    category_code: 'M0101000000',
    category_path: '直线运动零件>线性导向轴',
  },
  {
    baseline: false,
    site_logo_url:
      'https://p1.itc.cn/q_70/images03/20210924/0abaf363d7b048938bf1384dadf7d291.png',
    site_name: '怡合达',
    site_code: 'yiheda',
    category_name: '线性导向轴',
    category_code: 'A01',
    category_path: '直线运动零件>线性导向轴',
  },
  {
    baseline: false,
    site_logo_url: '/site_logos/ihf.png',
    site_name: '爱合发',
    site_code: 'ihf',
    category_name: '线性导向轴',
    category_code: 'A01',
    category_path: '直线运动零件>线性导向轴',
  },
]);

const baseSiteList = computed(() => {
  return site_list.value.filter(ele => ele.baseline);
});
const baseActiveKey = ref('');

const compareSiteList = computed(() => {
  return site_list.value.filter(ele => !ele.baseline).map((item) => {
    item.key = `${item.site_code}:${item.category_code}`;
    return item
  });
});
const compareActiveKey = ref('');
// 分类条件映射表 (从api获取)
const condition_map = ref({});

const open = ref(false);

// 生成相同组选项
const gen_same_select_conditions = item => {
  // 从 condition_map 中生成待选择匹配的其他站点相同组选项
  let conditions = [];
  for (let [category_str, site_conditions] of Object.entries(
    condition_map.value
  )) {
    let [site_code, category_code] = category_str.split(':');
    let category_name = condition_map.value[category_str][0].category_name;
    if (site_code !== item.site_code) {
      // 过滤掉当前站点
      for (let site_condition of site_conditions) {
        if (!site_condition.pick_me) {
          // 过滤掉已经分类的搜索条件
          conditions.push({
            label: `${site_code}>${category_name}>${site_condition.condition_name}`,
            value: `${site_code}:${category_code}:${site_condition.condition_name}`,
          });
        }
      }
    }
  }
  same_select_conditions.value = conditions;
  return conditions;
};

// 检查 array 中是否已经存在相同的搜索条件
const check_arr_item = (item, array) => {
  function check_item(item) {
    return array.find(
      i =>
        i.site_code === item.site_code &&
        i.condition_name == item.condition_name
    )
  }
  if (Array.isArray(item)) {
    for (let i of item) {
      if (check_item(i)) {
        return true;
      }
    }
    return false;
  } else {
    return check_item(item);
  }
};

// 检查相同搜索条件中是否已经存在相同的搜索条件
const check_same = item => {
  // 检查 item 是否已经存在
  function check_item(i) {
    for (let item of step_data.value.same_group) {
      for (let match_site of item.matches) {
        if (
          match_site.site_code === i.site_code &&
          match_site.condition_name === i.condition_name
        ) {
          return item;
        }
      }
    }
  }
  // 检查 item 是否是数组
  if (Array.isArray(item)) {
    for (let i of item) {
      if (check_item(i)) {
        return i;
      }
    }
    return false;
  } else {
    return check_item(item);
  }
};

// 在所有的表格中检查是否已经存在相同的搜索条件
const check_in_all = item => {
  return (
    check_same(item) ||
    check_arr_item(item, step_data.value.diff_group) ||
    check_arr_item(item, step_data.value.tear_group)
  );
};

// 已选择的其它类目的相同搜索条件
const select_same_conditions = ref([]);

// 选择的相同搜索条件
const same_select_conditions = ref([]);

// 添加相同搜索条件 (将该行的数据和已选择的其它类目的相同搜索条件合并)
const add_same_condition = item => {
  console.log('add_same_condition ->', item);
  // 检查选项是否为空
  if (select_same_conditions.value.length === 0) {
    message.warning('请选择匹配的搜索条件');
    return;
  }
  // 确认添加
  const confirm_add = () => {
    // 根据 site_code 和 condition_name 获取原搜索条件
    function get_origin_condition(site_code, category_code, condition_name) {
      for (let site_condition of condition_map.value[
        `${site_code}:${category_code}`
      ]) {
        if (site_condition.condition_name === condition_name) {
          // 如果是基准站点，则设置baseline为true
          if (site_code === get_baseline_site_code(process_data.value)) {
            site_condition.baseline = true;
          }
          return site_condition;
        }
      }
    }
    // 构建匹配站点
    let matches = [item];
    // 添加其余选中站点的搜索项
    for (let select_condition of select_same_conditions.value) {
      let [site_code, category_code, condition_name] =
        select_condition.split(':');
      matches.push(
        get_origin_condition(site_code, category_code, condition_name)
      );
    }
    // 设置基准站点
    for (let match_site of matches) {
      if (match_site.site_code === get_baseline_site_code(process_data.value)) {
        match_site.baseline = true;
      }
    }
    // 补充选项值的 site_code 字段
    for (let match_site of matches) {
      for (let option of match_site.options) {
        option.site_code = match_site.site_code;
      }
    }
    // 将基准站点(如果有)移动到第一位
    matches.sort((a, b) => {
      if (a.baseline) {
        return -1;
      } else if (b.baseline) {
        return 1;
      } else {
        return 0;
      }
    });
    // 补充 matches.options 中的 condition_code
    for (let match_category of matches) {
      for (let option of match_category.options) {
        option.condition_code = match_category.condition_code;
      }
    }
    // 构建数据
    let same_item = {
      site_code: item.site_code,
      condition_name: item.condition_name,
      condition_code: item.condition_code,
      matches: matches,
      src_category_code: item.category_code,
    };
    // 添加数据
    if (!check_in_all(same_item.matches)) {
      for (let match_site of same_item.matches) {
        match_site.pick_me = true;
        match_site.pick_diff = false;
        match_site.pick_tear = false;
      }
      step_data.value.same_group.push(same_item);
    } else {
      message.warning('已经存在相同的搜索条件');
    }
    // 清空选中
    select_same_conditions.value = [];
  };
  // 如果已经存在编辑过的相同搜索条件处理进度，需要提示是否删除
  if (get_process_step_data(process_data.value, 'CONFLICT_SOLVE')) {
    Modal.confirm({
      title: '检测到进度冲突',
      icon: createVNode(ExclamationCircleOutlined),
      content: createVNode(
        'div',
        { style: 'color:red;' },
        '检测到您已经编辑过相同搜索条件的处理进度，继续操作将会删除之前的相同项处理进度，是否继续？'
      ),
      async onOk() {
        confirm_add();
        await update_step_data('CONFLICT_SOLVE', process_data.value, null);
      },
      onCancel() {
        console.log('Modal Canceled');
      },
      class: 'test',
    });
  } else {
    confirm_add();
  }
};

// 添加不同搜索条件
const add_diff_condition = item => {
  console.log(item);
  // 添加数据
  if (!check_in_all(item)) {
    item.pick_me = true;
    item.pick_diff = true;
    item.pick_tear = false;
    step_data.value.diff_group.push(item);
  } else {
    message.warning('已经存在相同的搜索条件');
  }
};

// 添加拆解搜索条件
const add_tear_condition = item => {
  console.log(item);
  // 添加数据
  if (!check_in_all(item)) {
    item.pick_me = true;
    item.pick_diff = false;
    item.pick_tear = true;
    step_data.value.tear_group.push(item);
  } else {
    message.warning('已经存在相同的搜索条件');
  }
};

// 删除搜索条件
const remove_condition = (from_group, condition_item) => {
  console.log('remove ->', condition_item);

  const do_table_del = () => {
    // 根据 condition_item 的 site_code 和 condition_name 从三个表格中删除
    condition_item.pick_me = false;
    condition_item.pick_diff = false;
    condition_item.pick_tear = false;
    if (condition_item.matches) {
      for (let match_conditions of condition_item.matches) {
        match_conditions.pick_me = false;
        match_conditions.pick_diff = false;
        match_conditions.pick_tear = false;
      }
    }
    step_data.value.same_group = step_data.value.same_group.filter(
      i =>
        i.site_code !== condition_item.site_code ||
        i.condition_name !== condition_item.condition_name
    );
    step_data.value.diff_group = step_data.value.diff_group.filter(
      i =>
        i.site_code !== condition_item.site_code ||
        i.condition_name !== condition_item.condition_name
    );
    step_data.value.tear_group = step_data.value.tear_group.filter(
      i =>
        i.site_code !== condition_item.site_code ||
        i.condition_name !== condition_item.condition_name
    );
    // setTimeout(() => {
    //   refresh_all_pick_me();
    // }, 100);
    refresh_all_pick_me();
  };

  const confirm_del = (desc, callback = () => {}) => {
    Modal.confirm({
      title: '检测到进度冲突',
      icon: createVNode(ExclamationCircleOutlined),
      content: createVNode('div', { style: 'color:red;' }, desc),
      async onOk() {
        do_table_del();
        await callback();
      },
      onCancel() {
        console.log('Modal Canceled');
      },
      class: 'test',
    });
  };

  if (from_group === 'same') {
    if (get_process_step_data(process_data.value, 'CONFLICT_SOLVE')) {
      confirm_del(
        '检测到您已经编辑过相同搜索条件的处理进度，继续操作将会清除原有的相同项所有处理进度且无法撤回，是否继续？',
        async () => {
          do_table_del();
          await update_step_data('CONFLICT_SOLVE', process_data.value, null);
        }
      );
    } else {
      do_table_del();
    }
  } else if (from_group === 'diff') {
    if (get_process_step_data(process_data.value, 'DIFF_MERGE')) {
      confirm_del(
        '检测到您已经编辑过不同搜索条件的处理进度，继续操作将会清除原有的不同项该选项处理进度且无法撤回，是否继续？',
        async () => {
          process_data.value = drop_diff_condition(
            process_data.value,
            condition_item
          );
          await update_process_data(process_data.value);
        }
      );
    } else {
      do_table_del();
    }
  } else if (from_group === 'tear') {
    if (get_process_step_data(process_data.value, 'TEARDOWN')) {
      confirm_del(
        '检测到您已经编辑过拆解搜索条件的处理进度，继续操作将会删除原有的拆解项该选项处理进度，是否继续？',
        async () => {
          process_data.value = drop_tear_condition(
            process_data.value,
            condition_item
          );
          await update_process_data(process_data.value);
        }
      );
    } else {
      do_table_del();
    }
  }
};

// 从表格中删除搜索条件
const remove_from_table = (item) => {
  let from_group = item.pick_me && item.pick_tear? 'tear': (item.pick_diff ? 'diff': 'same')
  remove_condition(from_group, check_in_all(item));
}

// 清空所有搜索条件
const clear_all_condition = (item) => {
  // 清空选择
  for (let item of step_data.value.same_group) {
    for (let match_site of item.matches) {
      match_site.pick_me = false;
      match_site.pick_diff = false;
      match_site.pick_tear = false;
    }
  }
  for (let item of step_data.value.diff_group) {
    item.pick_me = false;
    item.pick_diff = false;
    item.pick_tear = false;
  }
  for (let item of step_data.value.tear_group) {
    item.pick_me = false;
    item.pick_diff = false;
    item.pick_tear = false;
  }
  // 清空列表
  step_data.value.same_group = [];
  step_data.value.diff_group = [];
  step_data.value.tear_group = [];
};

const showDrawer = () => {
  open.value = true;
};

const onClose = () => {
  open.value = false;
};

// 初始化: 获取当前步骤数据
onMounted(async () => {
  process_data.value = await fetch_process_data();

  // 读取当前步骤数据
  const last_step_data =
    get_process_step_data(process_data.value, 'CONDITION_DIV')?.data ?? null;
  if (last_step_data) {
    step_data.value = last_step_data;
    message.success('读取过程数据成功');
  }

  // 读取站点列表
  site_list.value = clone_site_data(process_data.value);
  // 读取分类条件映射表
  condition_map.value = get_raw_condition_map(process_data.value);
  // 刷新所有搜索条件的已处理状态
  refresh_all_pick_me();

  // 默认展开第一个基准站点和第一个对比站点
  baseActiveKey.value = baseSiteList.value[0].id;
  if (compareSiteList.value.length > 0) {
    compareActiveKey.value = compareSiteList.value[0].id;
  }
});

// 完成步骤: 更新提交当前步骤数据
const finish = async () => {
  message.info('正在提交数据，请稍后...');
  // 设置只读
  step_data.value.read_only = true;
  // 更新提交当前步骤数据
  if (
    await update_step_data('CONDITION_DIV', process_data.value, step_data.value)
  ) {
    // 跳转到下一步
    emit('finish');
  }
};

// 刷新所有 condition_map 中的 pick_me 状态
const refresh_all_pick_me = () => {
  for (let [_, site_conditions] of Object.entries(condition_map.value)) {
    for (let site_condition of site_conditions) {
      site_condition.pick_me = !!check_in_all(site_condition);
    }
  }
};

// 打开新标签页指定 url
const open_new_tab = url => {
  window.open(url);
};

// 表格列配置
const tb_columns = ref({
  same_condition_columns: [
    {
      title: '站点码',
      dataIndex: 'site_code',
      key: 'site_code',
    },
    {
      title: '搜索条件',
      dataIndex: 'condition_name',
      key: 'condition_name',
    },
    {
      title: '匹配站点',
      dataIndex: 'matches_txt',
      key: 'matches_txt',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    },
  ],

  diff_condition_columns: [
    {
      title: '站点码',
      dataIndex: 'site_code',
      key: 'site_code',
    },
    {
      title: '搜索条件',
      dataIndex: 'condition_name',
      key: 'condition_name',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    },
  ],

  tear_condition_columns: [
    {
      title: '站点码',
      dataIndex: 'site_code',
      key: 'site_code',
    },
    {
      title: '搜索条件',
      dataIndex: 'condition_name',
      key: 'condition_name',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    },
  ],
});
</script>

<script>
import {
  List,
  ListItem,
  ListItemMeta,
  Select,
  Card,
  Drawer,
  BadgeRibbon,
  Col,
  Row,
  Table,
  Button,
  Space,
  Divider,
  Popconfirm,
  Popover,
  Tag,
  Tabs,
  TabPane,
} from 'ant-design-vue';

export default {
  components: {
    AList: List,
    AListItem: ListItem,
    AListItemMeta: ListItemMeta,
    ASelect: Select,
    ACard: Card,
    ADrawer: Drawer,
    ABadgeRibbon: BadgeRibbon,
    ACol: Col,
    ARow: Row,
    APopconfirm: Popconfirm,
    APopover: Popover,
    ADivider: Divider,
    ATable: Table,
    AButton: Button,
    ASpace: Space,
    ATag: Tag,
    ATabs: Tabs,
    ATabPane: TabPane,
  },
};
</script>

<style lang="scss" scoped>
.classify_container {
  padding: 0px 100px;
  position: relative;
  .drawer-button {
    position: absolute;
    right: 100px;
    z-index: 9;
  }
  .condition_row {
    width: 100%;
    padding: 10px 0;
  }

  .condition_footer {
    width: 100%;
    padding: 50px 0;
    background-color: aliceblue;
  }

  .site_card {
    padding: 32px 4px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }

  .site_logo {
    object-fit: contain;
  }

  .list_window {
    height: calc(100vh - 240px);
    overflow-y: auto;
  }

  .opt_text_2 {
    display: block;
    width: 40px;
  }

  .condition_options_container {
    padding: 0;
    margin: 0 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 65px;

    p {
      margin: 0;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    &::after {
      content: '';
      flex-grow: 1;
    }
  }

  /**

  .deled_row {
    background-color: rgba(255, 166, 0, 0.125);

    .ant-table-cell-row-hover {
      background-color: rgba(255, 166, 0, 0.25);
    }
  }
  */
}
</style>
